AnimationController এবং Custom Animations

Flutter এ AnimationController এবং Custom Animations ব্যবহার করে আপনি জটিল এবং কাস্টমাইজড এনিমেশন তৈরি করতে পারেন। AnimationController একটি অত্যন্ত শক্তিশালী টুল, যা আপনার এনিমেশনের সময়কাল, শুরু এবং শেষ বিন্দু, লুপিং এবং অন্যান্য ডাইনামিক কনফিগারেশন পরিচালনা করতে সক্ষম।

AnimationController কী?

AnimationController হলো একটি ক্লাস যা এনিমেশন কন্ট্রোল করার জন্য ব্যবহৃত হয়। এটি TickerProvider এর সাথে সংযুক্ত থাকে এবং এনিমেশনের সময়কাল এবং স্টেট পরিচালনা করে। এটি আপনাকে এনিমেশন শুরু, থামানো, লুপ করা, বা পরিবর্তন করা ইত্যাদি কন্ট্রোল দিতে সক্ষম করে।

AnimationController এর প্রধান বৈশিষ্ট্য:

• duration: এনিমেশনের সময়কাল সেট করে।
• forward() এবং reverse(): এনিমেশন শুরু এবং রিভার্স করে।
• repeat(): এনিমেশন লুপ করে।
• stop(): এনিমেশন বন্ধ করে।
• reset(): এনিমেশন পুনরায় শুরু অবস্থায় নিয়ে যায়।

Custom Animation তৈরি করার ধাপসমূহ:

1. AnimationController তৈরি করুন।
2. Tween দিয়ে এনিমেশনের শুরু এবং শেষ মান নির্ধারণ করুন।
3. CurvedAnimation দিয়ে এনিমেশনে কাস্টম কার্ভ যোগ করুন।
4. AnimatedBuilder বা AnimationListener ব্যবহার করে এনিমেশন আপডেট এবং UI রিফ্রেশ করুন।

AnimationController এর উদাহরণ:

import 'package:flutter/material.dart';

class AnimationControllerExample extends StatefulWidget {
  @override
  _AnimationControllerExampleState createState() => _AnimationControllerExampleState();
}

class _AnimationControllerExampleState extends State<AnimationControllerExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );

    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );

    _controller.repeat(reverse: true); // এনিমেশন রিপিট করা হচ্ছে
  }

  @override
  void dispose() {
    _controller.dispose(); // কন্ট্রোলার বন্ধ করা
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Animation Controller Example')),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Opacity(
              opacity: _animation.value,
              child: Container(
                width: 200,
                height: 200,
                color: Colors.blue,
              ),
            );
          },
        ),
      ),
    );
  }
}

• AnimationController: এনিমেশন পরিচালনার জন্য তৈরি করা হয়।
• Tween<double>: একটি ডাবল ভ্যালু নিয়ে কাজ করে এবং এর শুরু এবং শেষ মান নির্ধারণ করে।
• CurvedAnimation: এনিমেশনে একটি কার্ভ যোগ করে, যা এনিমেশনকে মসৃণ করে তোলে।
• AnimatedBuilder: এনিমেশনের মান পরিবর্তন হলে UI রিফ্রেশ করে।

Custom Animations:

Custom Animations তৈরি করতে আপনি AnimationController এর সাথে Tween, CurvedAnimation, এবং Transform এর মতো উইজেট ব্যবহার করতে পারেন।

Custom Scale Animation উদাহরণ:

import 'package:flutter/material.dart';

class ScaleAnimationExample extends StatefulWidget {
  @override
  _ScaleAnimationExampleState createState() => _ScaleAnimationExampleState();
}

class _ScaleAnimationExampleState extends State<ScaleAnimationExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );

    _scaleAnimation = Tween<double>(begin: 0.5, end: 1.5).animate(
      CurvedAnimation(parent: _controller, curve: Curves.elasticInOut),
    );

    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Custom Scale Animation Example')),
      body: Center(
        child: AnimatedBuilder(
          animation: _scaleAnimation,
          builder: (context, child) {
            return Transform.scale(
              scale: _scaleAnimation.value,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
            );
          },
        ),
      ),
    );
  }
}

• Transform.scale: এনিমেশন অনুযায়ী স্কেলিং পরিবর্তন করে।
• CurvedAnimation: Curves.elasticInOut ব্যবহার করে স্প্রিং-এর মতো মুভমেন্ট তৈরি করা হয়েছে।

AnimationController এর সাথে Color Tween ব্যবহার:

Flutter এ ColorTween ব্যবহার করে এনিমেশনে রঙ পরিবর্তন করা যায়।

Color Animation উদাহরণ:

import 'package:flutter/material.dart';

class ColorAnimationExample extends StatefulWidget {
  @override
  _ColorAnimationExampleState createState() => _ColorAnimationExampleState();
}

class _ColorAnimationExampleState extends State<ColorAnimationExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Color?> _colorAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );

    _colorAnimation = ColorTween(begin: Colors.red, end: Colors.blue).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );

    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Color Animation Example')),
      body: Center(
        child: AnimatedBuilder(
          animation: _colorAnimation,
          builder: (context, child) {
            return Container(
              width: 200,
              height: 200,
              color: _colorAnimation.value,
            );
          },
        ),
      ),
    );
  }
}

• ColorTween: দুটি রঙের মধ্যে এনিমেশন করে।
• CurvedAnimation: রঙের এনিমেশনে কার্ভ যোগ করে, যা পরিবর্তনকে মসৃণ করে তোলে।

AnimationListener এবং setState ব্যবহার করে Custom Animation:

AnimationListener ব্যবহার করে এনিমেশন পরিবর্তন হলে UI আপডেট করা যায়।

import 'package:flutter/material.dart';

class CustomAnimationListenerExample extends StatefulWidget {
  @override
  _CustomAnimationListenerExampleState createState() => _CustomAnimationListenerExampleState();
}

class _CustomAnimationListenerExampleState extends State<CustomAnimationListenerExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _opacityAnimation;
  double _currentOpacity = 1.0;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );

    _opacityAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(_controller)
      ..addListener(() {
        setState(() {
          _currentOpacity = _opacityAnimation.value;
        });
      });

    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Custom Animation Listener Example')),
      body: Center(
        child: Opacity(
          opacity: _currentOpacity,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.purple,
          ),
        ),
      ),
    );
  }
}

• addListener(): AnimationController এ পরিবর্তন ঘটলে UI আপডেট করতে সেট করা হয়েছে।
• setState(): এনিমেশনের মান পরিবর্তন হলে UI রিফ্রেশ করা হয়।

AnimationController এবং Custom Animations এর সেরা চর্চা:

1. AnimationController সঠিকভাবে dispose করুন: AnimationController এর মেমোরি লিক এড়ানোর জন্য dispose() মেথডে বন্ধ করে দিন।
2. CurvedAnimation ব্যবহার করুন: এনিমেশন মসৃণ এবং বাস্তবসম্মত দেখানোর জন্য কার্ভ ব্যবহার করুন।
3. AnimatedBuilder ব্যবহার করুন: এটি কোড রিইউজ করা সহজ করে এবং এনিমেশন আপডেটের সময় UI রিফ্রেশ করে।

উপসংহার:

Flutter এ AnimationController এবং Custom Animations ব্যবহার করে একটি ডাইনামিক এবং ইন্টারেকটিভ অ্যাপ্লিকেশন তৈরি করা যায়। AnimationController এবং Tween এর মাধ্যমে কাস্টম এনিমেশন তৈরি করা সহজ, এবং CurvedAnimation যোগ করে এনিমেশনকে আরো বাস্তবসম্মত এবং মসৃণ করা যায়।